<template lang="pug">
.cp-assgin-edit
  el-dialog(:title="title", :visible="visible", @close="close", :close-on-click-modal="false")
    el-form.an-form(:inline="true", label-width="72px")
      el-row(:gutter="36")
        el-col(:span="14")
          el-form-item.is-required(label="指派类型")
            el-select(v-model="detail.assignType", placeholder="请选择")
              el-option(v-for="item in typeSelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="36")
        el-col(:span="18")
          el-form-item.is-required(label="指派原因")
            el-select(multiple, v-model="detail.assignReason", placeholder="请选择")
              el-option(v-for="item in reasonSelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="36")
        el-col(:span="18")
          el-form-item.is-required(label="课程组合")
            el-select(multiple, v-model="detail.assignCourse", placeholder="请选择")
              el-option(v-for="item in courseSelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="36")
        el-col(:span="18")
          el-form-item(label="必选员工")
            el-select(multiple, v-model="detail.requireStaff", placeholder="请选择")
              el-option(v-for="item in roleSelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="36")
        el-col(:span="18")
          el-form-item(label="可选员工")
            el-select(multiple, v-model="detail.optionStaff", placeholder="请选择")
              el-option(v-for="item in roleSelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="36")
        el-col.desc-col(:span="14")
          el-form-item.is-required(label="到期时间")
            el-date-picker(v-model="detail.expireDate", type="date", style="width: 100%", placeholder="选择日期", :clearable="false")
          span.desc-tip ( 仅用于单次重复 )
      el-row(:gutter="36")
        el-col.desc-col(:span="10")
          el-form-item.is-required(label="指派周期", style="width: 144px")
            el-input(v-model="detail.assignCycle")
          el-select(v-model="detail.cycleType", placeholder="请选择", style="width: 96px")
            el-option(v-for="item in periodSelect", :key="item.value", :label="item.name", :value="item.value")
          span.desc-tip ( 仅用于重复重复 )
      el-row(:gutter="36")
        el-col.desc-col(:span="10")
          el-form-item.is-required(label="提示日期", style="width: 144px")
            el-input(v-model="detail.assignTip")
          el-select(v-model="detail.tipType", placeholder="请选择", style="width: 96px")
            el-option(v-for="item in periodSelect", :key="item.value", :label="item.name", :value="item.value")
          span.desc-tip ( 仅用于重复重复，提前出现多久出现在待学中 )
    .an-btns
      el-button.dia-btn(type="primary", plain, @click="close") 取消
      el-button.dia-btn.dia-after(type="primary", @click="saveAssign") 确定
</template>

<script>
import { mapGetters } from 'vuex';
import check from './check';

export default {
  name: 'assignview',
  props: {
    title: {
      type: String,
      default: '查看指派详情'
    },
    visible: Boolean,
    detail: Object
  },
  data() {
    return {
      typeSelect: [
        { name: '单次', value: '0' },
        { name: '重复', value: '1' }
      ],
      reasonSelect: [
        { name: '新员工', value: '0' },
        { name: '法律法规更新', value: '1' },
        { name: '行业标准学习', value: '2' }
      ],
      courseSelect: [
        { name: '新员工培训', value: '0' },
        { name: '销售培训', value: '1' },
        { name: '市场营销培训', value: '2' }
      ],
      periodSelect: [
        { name: '天', value: '0' },
        { name: '周', value: '1' },
        { name: '月', value: '2' },
        { name: '年', value: '3' }
      ]
    };
  },
  methods: {
    close () {
      this.$emit('close');
    },
    saveAssign () {
      const canEmit = check(this.detail);
      if (canEmit) {
        this.$emit('save', this.detail);
      }
    },
  },
  computed: {
    ...mapGetters(['roleSelect'])
  },
  mounted () {}
};
</script>

<style lang="sass">
.cp-assgin-edit
  .an-form
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__content
      width: calc(100% - 72px)
    .el-form-item__label
      text-align: left
    .el-select
      width: 100%
    .long-item
      .el-form-item__content
        width: calc(100% - 86px)
  .desc-col
    overflow: visible
    .desc-tip
      margin-top: 6px
      margin-left: 12px
      display: inline-block
      font-size: 13px
      color: #666
    .el-select
      margin-left: 8px
  .an-btns
    margin-top: 24px
    text-align: center
    .dia-btn
      width: 80px
    .dia-after
      margin-left: 40px
</style>
